---
title: Barra de herramientas de desarrollo
description: Una guía para usar la barra de herramientas de desarrollo en Astro
i18nReady: true
---

Mientras el servidor de desarrollo está en ejecución, Astro incluye una barra de herramientas de desarrollo en la parte inferior de cada página en tu vista previa local del navegador.

Esta barra de herramientas incluye una serie de herramientas útiles para depurar e inspeccionar tu sitio durante el desarrollo y se puede [extender con más aplicaciones de la barra de herramientas de desarrollo](#extendiendo-la-barra-de-herramientas-de-desarrollo) que se encuentran en el directorio de integraciones. ¡Incluso puedes construir tus propias aplicaciones utilizando la [API de la barra de herramientas de desarrollo](/es/reference/dev-toolbar-app-reference/)!

Esta barra de herramientas está habilitada de forma predeterminada y aparece cuando pasas el cursor por la parte inferior de la página. Es una herramienta de desarrollo solamente y no aparecerá en tu sitio publicado.

## Aplicaciones integradas

### Astro Menu

La aplicación de Astro Menu proporciona un acceso fácil a varios datos sobre el proyecto actual y enlaces a recursos adicionales. En particular, proporciona acceso con un solo clic a la documentación de Astro, al repositorio de GitHub y al servidor de Discord.

Esta aplicación también incluye un botón "Copy debug info" que ejecutará el comando [`astro info`](/es/reference/cli-reference/#astro-info) y copiará la salida al portapapeles. Esto puede ser útil al solicitar ayuda o informar problemas.

### Inspect

La aplicación Inspect proporciona información sobre cualquier [isla](/es/concepts/islands/) en la página actual. Esto te mostrará las propiedades pasadas a cada isla y la directiva del cliente que se está utilizando para renderizarlas.

### Audit

La aplicación Audit ejecuta automáticamente una serie de auditorías en la página actual, comprobando los problemas de rendimiento y accesibilidad más comunes. Cuando se encuentra un problema, aparecerá un punto rojo en la barra de herramientas. Al hacer clic en la aplicación, se mostrará una lista de resultados de la auditoría y se resaltarán los elementos relacionados directamente en la página.

:::note
La auditoría básica de rendimiento y accesibilidad realizada por la barra de herramientas de desarrollo no reemplaza a herramientas dedicadas como [Pa11y](https://pa11y.org/) o [Lighthouse](https://developers.google.com/web/tools/lighthouse), o incluso mejor, ¡los humanos!

La barra de herramientas de desarrollo tiene como objetivo proporcionar una forma rápida y sencilla de detectar problemas comunes durante el desarrollo, sin necesidad de cambiar de contexto a una herramienta diferente.
:::

### Settings

La aplicación Settings te permite alternar diferentes configuraciones para la barra de herramientas de desarrollo, como el registro detallado y la capacidad de deshabilitar las notificaciones.

## Extendiendo la barra de herramientas de desarrollo

Las integraciones de Astro pueden agregar nuevas aplicaciones a la barra de herramientas de desarrollo, lo que te permite extenderla con herramientas personalizadas específicas para tu proyecto. Puedes encontrar [más aplicaciones de herramientas de desarrollo para instalar en el directorio de integraciones](https://astro.build/integrations/?search=&categories%5B%5D=toolbar) o utilizando el [Menú de Astro](#astro-menu).

Instala aplicaciones adicionales de la barra de herramientas de desarrollo en tu proyecto de la misma manera que cualquier otra [integración de Astro](/es/guides/integrations-guide/) según sus propias instrucciones de instalación.

## Deshabilitar la barra de herramientas de desarrollo

La barra de herramientas de desarrollo está habilitada de forma predeterminada para todos los sitios. Puedes elegir deshabilitarla para proyectos y/o usuarios individuales según sea necesario.

### Por proyecto

Para deshabilitar la barra de herramientas de desarrollo para todos los que trabajan en un proyecto, establece `devToolbar: false` en el [archivo de configuración de Astro](/es/reference/configuration-reference/).

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
})
```

Para habilitar la barra de herramientas de desarrollo nuevamente, elimina estas líneas de tu configuración o establece `enabled:true`.

### Por usuario

Para deshabilitar la barra de herramientas de desarrollo para ti mismo en un proyecto específico, ejecuta el comando [`astro preferences`](/es/reference/cli-reference/#astro-preferences).

```shell
astro preferences disable devToolbar
```

Para deshabilitar la barra de herramientas de desarrollo en todos los proyectos de Astro para un usuario en la máquina actual, agrega la bandera `--global` al ejecutar `astro-preferences`:

```shell
astro preferences disable --global devToolbar
```

La barra de herramientas de desarrollo se puede habilitar más tarde con:

```shell
astro preferences enable devToolbar
```
